<template>
  <div class="foot">
    <div v-for="item in data.home_foot_menu" :key="item.id" style="width:25%;">

        <div @click="dealFooter(item)" style="display:flex;flex-direction:column;align-items: center;position: relative">
          <img id="mysale" v-if="item.link == '/sale'" style="height:0.24rem;width:0.24rem;margin-bottom:0.03rem"
               :src="item.link == $route.path ? item.active_icon:item.default_icon"/>
          <img v-else style="height:0.24rem;width:0.24rem;margin-bottom:0.03rem"
               :src="item.link == $route.path ? item.active_icon:item.default_icon"/>
          <div class="common-singleline-text" style="font-size: 0.1rem;" :style="{color:item.link == $route.path ? '#333333' :'#cccccc'}">{{item.name}}</div>
        </div>

    </div>
  </div>
</template>

<script>
  import { mapModules, mapRules } from 'vuet'
  export default {
//    props: ['list'],
    mixins: [
      mapModules({ data: 'footer'}),
      mapRules({ once:[{path:'footer'}]})
    ],
    computed: {},
    created() {

    },
    methods: {},
    data() {
      return {
        dealFooter(item){
          this.$replaceRouteByPath(item.link)
//          if (this.$route.name == "sale" && item.link == "/sale") {
//            this.$vuet.getModule("sale").fetch()
//            document.getElementById("mysale").src="/static/sale_bottom_refresh.gif"
//          } else {
//            this.$replaceRouteByPath(item.link)
//          }
        }
      }
    }
  }
</script>

<style scoped>
  .foot {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    background: rgba(255,255,255,0.9);
    right: 0;
    bottom: 0;
    left: 0;
    height: 0.49rem;
    box-shadow:0 -0.04rem 0.1rem 0 rgba(0,0,0,0.03);
    /*border-top: 0.01rem solid #ddd;*/
  }
</style>
